<div class="overflow-x-auto" style="max-height: 765px; overflow-y: auto;">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作时间
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作人
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作类型
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作内容
                </th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% set log_count = logs|length %}
            {% for log in logs %}
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ log.created_at | format_time }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ log.operator.name if log.operator else '未知' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ log.operation_type }}
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">
                    {{ log.operation_content }}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                    暂无操作记录
                </td>
            </tr>
            {% endfor %}
            
            <!-- 添加空行占位符，确保每页显示10行 -->
            {% if log_count < 10 %}
                {% for i in range(log_count, 10) %}
                <tr class="empty-row">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-300">
                        &nbsp;
                    </td>
                </tr>
                {% endfor %}
            {% endif %}
        </tbody>
    </table>
</div>

<!-- 分页控件 -->
<div class="sticky bottom-0 bg-white border-t border-gray-200 px-4 py-3 sm:px-6 mt-4">
    <div class="flex flex-1 justify-between sm:hidden">
        <a href="javascript:void(0);" 
           class="logs-pagination-link relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not logs_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ logs_pagination.prev_num }}">
            上一页
        </a>
        <a href="javascript:void(0);" 
           class="logs-pagination-link relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not logs_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ logs_pagination.next_num }}">
            下一页
        </a>
    </div>
    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ (logs_pagination.page - 1) * logs_pagination.per_page + 1 }}</span> 至 
                <span class="font-medium">{{ logs_pagination.page * logs_pagination.per_page if logs_pagination.page * logs_pagination.per_page < logs_pagination.total else logs_pagination.total }}</span> 条，
                共 <span class="font-medium">{{ logs_pagination.total }}</span> 条结果
            </p>
        </div>
        <div>
            <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                <a href="javascript:void(0);" 
                   class="logs-pagination-link relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not logs_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ logs_pagination.prev_num }}">
                    <span class="sr-only">上一页</span>
                    <i class="fas fa-chevron-left h-5 w-5" aria-hidden="true"></i>
                </a>
                
                <!-- 页码按钮 -->
                {% for p in logs_pagination.iter_pages() %}
                    {% if p %}
                        {% if p != logs_pagination.page %}
                            <a href="javascript:void(0);" 
                               class="logs-pagination-link relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                               data-page="{{ p }}">
                                {{ p }}
                            </a>
                        {% else %}
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold bg-primary text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                                {{ p }}
                            </span>
                        {% endif %}
                    {% else %}
                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}
                
                <a href="javascript:void(0);" 
                   class="logs-pagination-link relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not logs_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ logs_pagination.next_num }}">
                    <span class="sr-only">下一页</span>
                    <i class="fas fa-chevron-right h-5 w-5" aria-hidden="true"></i>
                </a>
            </nav>
        </div>
    </div>
</div>